import React from 'react';
import { Dropdown, Form, Input, Radio, Segment } from 'semantic-ui-react';

const OrderDetail = () => {
  const productClassOptions = [{ key: 'bonds', text: 'Bonds', value: 'bonds' }];
  const productSubClassOptions = [{ key: 'amortization', text: 'Amortization Bonds', value: 'amortization' }];
  const directionOptions = [
    { key: 'buy', text: 'Buy', value: 'buy' },
    { key: 'sell', text: 'Sell', value: 'sell' } // corrected 'Sell' and 'sell'
  ];
  const executionTypeOptions = [{ key: 'advisory', text: 'Advisory', value: 'advisory' }];

  return (
    <Segment>
      <h4>Order Details</h4>
      <Form>
        <Form.Group widths="equal">
          <Form.Field>
            <label>Order Received Date & Time</label>
            <Input type="datetime-local" />
          </Form.Field>
          <Form.Field>
            <label>Product Sub Class</label>
            <Dropdown placeholder="Amortization Bonds" fluid selection options={productSubClassOptions} />
          </Form.Field>
          <Form.Field>
            <label>Direction</label>
            <Dropdown placeholder="Buy" fluid selection options={directionOptions} />
          </Form.Field>
          <Form.Field>
            <label>Product Class</label>
            <Dropdown placeholder="Bonds" fluid selection options={productClassOptions} />
          </Form.Field>
        </Form.Group>
        <Form.Group widths="equal">
          <Form.Field>
            <label>Execution Type</label>
            <Dropdown placeholder="Advisory" fluid selection options={executionTypeOptions} />
          </Form.Field>
          <Form.Field>
            <label>DDC Order</label>
            <Form.Field>
              <Radio label="Yes" name="ddcorder" value="yes" /> {/* corrected label attribute */}
              <Radio label="No" name="ddcorder" value="no" /> {/* corrected '-' to '=' */}
            </Form.Field>
          </Form.Field>
          <Form.Field>
            <label>Notional</label>
            <Input />
          </Form.Field>
          <Form.Field>
            <label>Trade Date</label>
            <Input type="date" />
          </Form.Field>
        </Form.Group>
        <Form.Group widths="equal">
          <Form.Field>
            <label>Ccy</label> {/* corrected label tag closing */}
            <Input />
          </Form.Field>
          <Form.Field>
            <label>ISIN</label>
            <Input />
          </Form.Field>
          <Form.Field>
            <label>Spread (bps)</label> {/* corrected label tag opening */}
            <Input />
          </Form.Field>
          <Form.Field>
            <label>ACE Simulation ID</label>
            <Input />
          </Form.Field>
        </Form.Group>
      </Form>
    </Segment>
  );
};

export default OrderDetail;
